<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab栏切换</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .tab_1{
            width: 987px;
            margin: 100px auto;
        }
        .tab_2{
            height: 40px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
            /* display: block; */
        }
        li{
            list-style-type: none;
        }
        .tab_2 li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        .current{
            background-color: red;
            color: #f1f1f1;
        }
        .tab_31{
            display: none;
        }
    </style>
</head>
<body>
    <div class="tab_1">
        <div class="tab_2">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价(50000)</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_3">
            <div class="tab_31" style="display: block;">商品介绍模块内容</div>
            <div class="tab_31">规格与包装模块内容</div>
            <div class="tab_31">售后保障模块内容</div>
            <div class="tab_31">商品评价(50000)模块内容</div>
            <div class="tab_31">手机社区模块内容</div>
        </div>
    </div>

    <script>
        //获取相关dom元素
        const lis = document.querySelectorAll('.tab_2 li') 
        const divs = document.querySelectorAll('.tab_31') 

        //遍历li
        lis.forEach(function(item,index){
            console.log(item,'item')
            console.log(index,'index')
            /* 在这里添加一个索引,下面div显示是索引和上面li的高亮状态所在索引是一一对应 */
            item.onclick = function(){
                //使用排他思想:先清除所有li的样式
                lis.forEach(function(li){
                    console.log(li,'li')
                    li.classList.remove('current')
                })
                //在给当前点击的li添加样式
                item.classList.add('current')

                //对divs使用排他思想:先让所有的div隐藏
                divs.forEach(function(div){
                    div.style.display = 'none'
                })

                //在在给当前索引对应的div添加样式
                divs[index].style.display = 'block'
            }
        })
    </script>
</body>
</html>